<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Example - Single Timer Example</title>
    
    <!-- compiled JavaScript -->
    <script type="text/javascript" src="../dist/assets/js/angular-timer-bower.js"></script>
    <script type="text/javascript" src="../dist/assets/js/angular-timer-all.min.js"></script>
    <script>
        angular.module('MyApp', ['timer'])
        .controller('MyAppController', ['$scope', function ($scope) {
            $scope.timerRunning = true;

            $scope.startTimer = function (){
                $scope.$broadcast('timer-start');
                $scope.timerRunning = true;
            };

            $scope.stopTimer = function (){
                $scope.$broadcast('timer-stop');
                $scope.timerRunning = false;
            };

            $scope.$on('timer-stopped', function (event, data){
                console.log('Timer Stopped - data = ', data);
            });
        }]);
    </script>
</head>
<body ng-app="MyApp">
    <div ng-controller="MyAppController">
        <h1>AngularJS - Single Timer Example</h1>
        <h3><timer/></h3>
        <button ng-click="startTimer()" ng-disabled="timerRunning">Start Timer</button>
        <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>
    </div>
    <br/>
</body>
</html>